﻿<!DOCTYPE html>
<!-- GMTdate=4/18/2023 12:39:14 PM
     FullPresentationName: C:\Users\Mike\Desktop\P1M1P4 _Order.pptx
     Windows username: Mike
     Windows version: Windows 8.1
     EMOS.Web version: 5.0
     EMOS.Web Install Path: D:\EMOS.Web
     PPTools version: Duerr VISU PPT 2v0 Installer 20191106 160016 (2.0.0.34)
     PPTools licensed: false
     PPTools license key: TNPoAnReR7E4U3D
     SVG Export version: 5.0.0.527  -->
<html manifest="P1M1P4__Order.appcache">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta charset="utf-8">
        <title>ColorCode</title>
   <!-- G     <link rel="stylesheet" type="text/css" href="/lib/css/durr.emos.css">
        <link rel="stylesheet" type="text/css" href="/lib/css/jquery-ui.css">
        <script src="js/site.configuration.js"></script>
        <script src="/lib/js/durr.emos.js"></script>
        <script src="/lib/js/jquery.js"></script>
        <script src="/lib/js/jquery-ui.js"></script>
        <script src="js/演示文稿9_master.js"></script>
        <script src="js/ColorCode.js"></script> -->
		
    <style>
           /* 隐藏模态框 */
        #myModal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        /* 模态框内容 */
        .modal-content {
            background-color: white;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            font-size: 16px;
            line-height: 1.6;
            text-align: left;
        }

        /* 标题样式 */
        .modal-header {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        /* 关闭按钮 */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            background-color: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 600px;
            padding: 20px;
            position: relative;
        }
        .input-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .input-wrapper {
            display: flex;
            align-items: center;
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #ddd;
            padding: 5px;
            flex-grow: 1;
        }
        input[type="text"] {
            width: calc(100% - 70px);
            padding: 10px;
            border: none;
            border-radius: 8px 0 0 8px;
            outline: none;
            font-size: 16px;
        }
        button {
            width: 60px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 0 8px 8px 0;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #0056b3;
        }
        .voice-input-button {
            /*padding: 10px 20px;*/
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .voice-input-button:hover {
            background-color: #218838;
        }
        .response {
            margin-top: 20px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #ddd;
            min-height: 300px;
            max-height: 400px;
            overflow-y: auto;
        }
        .user-question {
            text-align: right;
            margin-bottom: 5px;
            font-size: 16px;
        }
        .assistant-response {
            text-align: left;
            font-size: 16px;
        }
        .duration {
            font-size: 0.9em;
            color: #888;
        }
        .voice-recording {
            animation: pulse 1s infinite;
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
        #voiceIndicator {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            color: #28a745;
            display: none;
        }
        @media (min-width: 600px) {
            .container {
                width: 50%;
            }
        }
    </style>
    <!-- 引入 marked.js 库 -->
    </head>
    <body style="background-color:rgba(242,242,242,1);">
        
	<div class="container">
        <p class="title">基于DeepSeek-r1:8b 与 PLC GPT Beat版</>
        <div class="response" id="response"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="userInput" placeholder="请输入你要询问的内容..." oninput="updatePlaceholder()">
                <button onclick="sendMessage()">发送</button>
            </div>
            <button class="voice-input-button" id="voiceButton" onclick="startVoiceRecognition()">语音输入</button>
        </div>
        <div id="voiceIndicator" class="voice-recording">正在录音...</div>
    </div>
	
	    <!-- 自定义模态框 -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div class="modal-header">○AI模型：DeepSeek-r1:8 Beat版○</div>
            <p>
                示例匹配指令：<br><br>
                &nbsp;&nbsp;- "请将A001温度调整到X℃"<br>
                &nbsp;&nbsp;- "修改A001的工作模式为休眠模式"<br>
                &nbsp;&nbsp;- "请将A001的温度调整到X度"<br>
                &nbsp;&nbsp;- "先设置A001压力为XMPa，然后切换A001至生产模式"
            </p>
        </div>
    </div>

	
	 <style>
        .assistant-response {
            margin-bottom: 10px;
        }
        .duration {
            font-size: smaller;
            color: #777;
        }
        .voice-recording {
            display: none;
        }
    </style>
		
		
	  <script>
        let recognition;
        const voiceIndicator = document.getElementById('voiceIndicator');
        const userInput = document.getElementById('userInput');
        let currentUtterance; // 用于存储当前的 SpeechSynthesisUtterance 对象
        let selectedVoice; // 用于存储选定的语音
		
		
      // 获取模态框元素
        var modal = document.getElementById("myModal");

        // 获取关闭按钮
        var span = document.getElementsByClassName("close")[0];

        // 页面加载后显示模态框
        window.onload = function() {
            modal.style.display = "block";
        };

        // 点击关闭按钮时隐藏模态框
        span.onclick = function() {
            modal.style.display = "none";
        };

        // 点击模态框外部区域时隐藏模态框
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        };
        function initSpeechRecognition() {
            if (!('webkitSpeechRecognition' in window)) {
                console.error('当前浏览器不支持语音识别');
                return null;
            }
            recognition = new webkitSpeechRecognition();
            recognition.continuous = false; // 设置为单次识别
            recognition.interimResults = true; // 显示临时结果
            recognition.lang = 'zh-CN'; // 设置语言为中文
            recognition.onresult = handleSpeechResult;
            recognition.onerror = handleSpeechError;
            recognition.onend = () => {
                voiceIndicator.style.display = 'none';
            };
            return recognition;
        }

        function handleSpeechResult(event) {
            const transcript = event.results[0][0].transcript.trim();
            userInput.value = transcript;
            if (event.results[0].isFinal) {
                userInput.dispatchEvent(new Event('input')); // 触发输入事件以更新占位符
            }
        }

        function handleSpeechError(event) {
            console.error('语音识别错误:', event.error);
            voiceIndicator.style.display = 'none';
        }

        function startVoiceRecognition() {
            if (!recognition) {
                recognition = initSpeechRecognition();
            }
            recognition.start();
            voiceIndicator.style.display = 'block';
        }

        async function sendMessage() {
            const startTime = new Date().getTime(); // 记录开始时间
            const message = userInput.value;
            const responseDiv = document.getElementById('response');
            responseDiv.innerHTML += `<p class="user-question">${message}</p>`;
            responseDiv.innerHTML += '<p>正在处理...</p>';

            try {
                const response = await fetch('http://localhost:8080/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ message })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }

                const data = await response.json(); // 新增: 解析响应数据
                const endTime = new Date().getTime(); // 记录结束时间
                const duration = (endTime - startTime) / 1000; // 计算耗时
                const resultText = `${data.results}`;
                responseDiv.innerHTML += `<p class="assistant-response">
                     <p style="font-size: large; border-bottom: 1px solid #e0e0e0;">${resultText}</p>
                 </p>`; // 显示助手回复

                responseDiv.innerHTML += `<p class="assistant-response duration">本次回答耗时${duration.toFixed(2)}秒</p>`; // 显示耗时，应用新的样式类
                responseDiv.innerHTML = responseDiv.innerHTML.replace('<p>正在处理...</p>', ''); // 删除“正在处理...”的文本

                // 朗读结果
                speak(resultText);
            } catch (error) {
                responseDiv.innerHTML += `<p class="assistant-response">Error: ${error.message}</p>`;
                responseDiv.innerHTML = responseDiv.innerHTML.replace('<p>正在处理...</p>', '');
            }
            // 自动滚动到最新内容
            responseDiv.scrollTop = responseDiv.scrollHeight;
            // 清空输入框内容
            userInput.value = '';
        }

        function getVoices() {
            // 获取所有可用的语音
            const voices = speechSynthesis.getVoices();
            // 这里可以根据您的需求选择一个语音，例如选择第一个中文语音
            for (let i = 0; i < voices.length; i++) {
                if (voices[i].lang.includes('zh-CN')) {
                    selectedVoice = voices[i];
                    break;
                }
            }
            if (!selectedVoice) {
                console.warn('没有找到中文语音包');
            }
        }

        function speak(text) {
            // 停止当前的朗读（如果有）
            if (currentUtterance && speechSynthesis.speaking) {
                speechSynthesis.cancel();
            }

            // 创建新的 SpeechSynthesisUtterance 对象
            currentUtterance = new SpeechSynthesisUtterance(text);
            currentUtterance.lang = 'zh-CN';

            // 如果有选择的语音，则使用该语音
            if (selectedVoice) {
                currentUtterance.voice = selectedVoice;
            }

            // 开始朗读
            speechSynthesis.speak(currentUtterance);
        }

        // 在页面加载完成后获取语音列表
        window.speechSynthesis.onvoiceschanged = function() {
            getVoices();
        };

        document.getElementById('userInput').addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault(); // 阻止默认的表单提交行为
                sendMessage();
            }
        });

        function updatePlaceholder() {
            if (userInput.value.length > 0) {
                userInput.placeholder = '';
            } else {
                userInput.placeholder = '请输入你要询问的内容...';
            }
        }
    </script>
		
    </body>
</html>


